<template>
    <div>
        <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border>
            <el-table-column prop="name" label="名称" />
            <el-table-column align="center" prop="code" label="权限值" />
            <el-table-column align="center" prop="updateTime" label="修改时间" />
            <el-table-column align="center" label="操作" width="260px">
                <template #default="{ row }">
                    <div class="operation">
                        <el-button type="primary" v-show="row.level !== 4" @click="addPermission(row)">
                            {{ row.level === 3 ? "添加功能" : "添加菜单" }}
                        </el-button>
                        <el-button type="primary" v-show="row.level !== 1" @click="editPermission(row)">编辑</el-button>
                        <el-button type="danger" v-show="row.level !== 1"
                            @click="deletePermission(row.id)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :title="form.id ? '编辑权限' : '新增权限'" v-model="dialogVisible" width="30%" @closed="restFormRef"
            align-center>
            <el-form :model="form" label-width="80px" :rules="rules" ref="ruleFormRef" status-icon>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item label="权限值" prop="code">
                    <el-input v-model="form.code" placeholder="请输入权限值"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div style="flex: auto">
                    <el-button type="primary" @click="submitForm">保存</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang='ts' name="Permission">
import type { PermissionResult, } from "@/api/role/type";
import { reqPermissionList, reqPermissionSave, reqPermissionUpdate, reqPermissionDelete } from "@/api/role";
import type { ResponseData } from "@/api/type";
import type { FormInstance, FormRules } from "element-plus";

let tableData = reactive<PermissionResult[]>([]);

let dialogVisible = ref(false);
let form = reactive<PermissionResult>({
    id: undefined,
    name: "",
    code: "",
    level: -1,
    pid: -1,
    type: -1,
});

let ruleFormRef = ref<FormInstance>();
const rules = ref<FormRules>({
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    code: [{ required: true, message: '请输入权限值', trigger: 'blur' }],
})

const restFormRef = () => {
    // 清空表单字段
    ruleFormRef.value?.resetFields();
    // 重置表单数据
    Object.assign(form, {
        id: undefined,
        name: "",
        code: "",
        level: undefined,
        pid: undefined,
        type: undefined,
    })
}


const getPermissionList = () => {
    reqPermissionList().then((res: ResponseData<PermissionResult[]>) => {
        Object.assign(tableData, res.data);
    }).catch((error: ResponseData<String>) => {
        ElMessage.error("获取菜单列表失败" + error.message);
    })
}

const addPermission = (row: PermissionResult) => {
    dialogVisible.value = true;
    if (row.level === 3) {
        form.type = 2;
    } else {
        form.type = 1;
    }
    form.pid = row.id as number;
    form.level = row.level + 1;
}

const editPermission = (row: PermissionResult) => {
    dialogVisible.value = true;
    Object.assign(form, row);
}

const submitForm = () => {
    ruleFormRef.value?.validate((valid: boolean) => {
        if (!valid) {
            return;
        }
        if (form.id) {
            reqPermissionUpdate(form).then(() => {
                ElMessage.success("权限修改成功");
                dialogVisible.value = false;
                getPermissionList();
            }).catch((error: ResponseData<String>) => {
                ElMessage.error("权限修改失败" + error.message);
            })
        } else {
            reqPermissionSave(form).then(() => {
                ElMessage.success("权限新增成功");
                dialogVisible.value = false;
                getPermissionList();
            }).catch((error: ResponseData<String>) => {
                ElMessage.error("权限新增失败" + error.message);
            })
        }
    })
}

const deletePermission = (id: number) => {
    ElMessageBox.confirm('确认删除该菜单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        reqPermissionDelete(id).then(() => {
            ElMessage.success("权限删除成功");
            getPermissionList();
        }).catch((error: ResponseData<String>) => {
            ElMessage.error("权限删除失败" + error.message);
        })
    }).catch(() => {

    });


}

onMounted(() => {
    getPermissionList();
})
</script>

<style scoped lang="scss">
.operation {
    display: flex;
    justify-content: space-between;
}
</style>